<template>
  <h1>App $subscribe 监听仓库数据的变化</h1>

  <p>{{ appStore.theme }}</p>
  <button @click="appStore.$patch((state) => (state.theme = 'dark'))">Toggle</button>
</template>

<script setup>
import { useAppStore } from './stores/app'

const appStore = useAppStore()

// 监听 appStore 数据的变化
appStore.$subscribe((mutation, state) => {
  console.log('state', state) // 最新的数据
  // console.log('mutation', mutation)

  // console.log('mutation.type', mutation.type)

  // mutation.type // 'direct' | 'patch object' | 'patch function'

  // 与 cartStore.$id 相同
  // mutation.storeId // 'cart'
  // 仅适用于 mutation.type === 'patch object'
  // mutation.payload // 补丁对象传递给 to cartStore.$patch()
  console.log('subscribe')
})
</script>
